@font-face{font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;src:url('./public/fonts/cinzel-decorative-title-900.ttf') format('truetype')}
:root{color-scheme:dark;--gold:#f5d985;--cream:#fff3cb;--aqua:#63dfcd;--deep:#0b2b35}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0a1723}
body{display:flex;justify-content:center;font-family:Tahoma,Arial,sans-serif;color:var(--cream);-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 50% 35%,#263442,#0a1723 65%)}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
button:focus-visible{outline:3px solid #a7fff0;outline-offset:5px}
button:disabled{cursor:default}
::selection{background:#ddb651;color:#123334}
.game{position:relative;isolation:isolate;width:min(100%,480px);height:100vh;height:100svh;min-height:560px;--safe-bottom:env(safe-area-inset-bottom,0px);max-height:1040px;overflow:hidden;background:#163c41;box-shadow:0 20px 100px #0007}
.palace{position:absolute;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:50% 25%;user-select:none;pointer-events:none}
.shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(7,29,38,.55),transparent 21%,transparent 42%,rgba(6,38,42,.12) 57%,rgba(4,28,34,.92) 100%);pointer-events:none}
.topbar{position:absolute;z-index:3;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;direction:ltr}
.top-actions{display:flex;align-items:center;justify-content:flex-end;padding-top:2px}
.enter-top{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:148px;min-height:54px;padding:10px 14px;border:2px solid #ffe3a0;border-radius:12px;background:linear-gradient(180deg,#bd2b56,#a71646 58%,#7b1239);color:#fff3cb;font-size:18px;font-weight:800;line-height:1.15;white-space:nowrap;text-decoration:none;text-shadow:0 2px 2px #0008;box-shadow:inset 0 2px 1px #fff3cb80,inset 0 -3px 2px #0003,0 3px 1px #705126,0 7px 14px #0006;transform-origin:center;transition:filter .18s ease}
.enter-top::before{content:"";position:absolute;inset:3px;border:1px solid #edba55;border-radius:7px;pointer-events:none}
.enter-top::after{content:"";position:absolute;bottom:-5px;left:calc(50% - 4px);width:8px;height:8px;border:1px solid #ffe3a0;background:#154e52;transform:rotate(45deg);pointer-events:none}
.enter-top svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.enter-top[data-pulse-active="true"]{animation:entry-pulse 2.4s cubic-bezier(.45,0,.55,1) infinite}
.enter-top:active{animation-play-state:paused;filter:brightness(.94)}
.enter-top:focus-visible,.reward-enter:focus-visible{outline:3px solid #a7fff0;outline-offset:4px}
@keyframes entry-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.wordmark{display:flex;flex-direction:column;align-items:center;width:min(100%,216px);min-width:0;color:#ffe3a0;text-align:center;user-select:none}
.wordmark strong{font:900 clamp(20px,5.5vw,27px)/1.05 'Cinzel Decorative',Georgia,serif;letter-spacing:-.025em;white-space:nowrap;-webkit-text-stroke:.6px #5e351b;paint-order:stroke fill;text-shadow:0 -1px 0 #fff3cb,0 2px 0 #895421,0 4px 4px #000b}
.wordmark span{font:900 12px/1.1 'Cinzel Decorative',Georgia,serif;letter-spacing:.025em;white-space:normal;text-wrap:balance;color:#ffe3a0;text-shadow:0 2px 3px #000c}
.wordmark-ornament{display:block;width:128px;height:9px;margin:4px 0 3px;fill:#e8bd67;filter:drop-shadow(0 2px 1px #0008)}
.wordmark-gem{fill:#cb3e77;stroke:#ffe3a0;stroke-width:.8}
.heading{position:absolute;top:max(107px,calc(env(safe-area-inset-top) + 78px));right:max(18px,env(safe-area-inset-right));width:167px;text-align:right;text-shadow:0 3px 10px #0009,0 1px 3px #000a}
.heading h1{margin:0;font-size:31px;line-height:1.25;font-weight:800;color:#ffe4a1;letter-spacing:-.025em;text-wrap:balance}
.heading p{margin:8px 0 0;font-size:12px;line-height:1.6;font-weight:600;color:#fff3ce}
.treasure-zone{position:absolute;left:0;right:0;bottom:calc(195px + var(--safe-bottom));height:clamp(230px,34svh,360px);display:grid;place-items:center;isolation:isolate}
.chest{position:absolute;inset:0;margin-inline:auto;z-index:2;width:min(100%,385px);height:100%;padding:0;border:0;background:none;transition:transform .18s ease;user-select:none}
.chest:active:not(:disabled){transform:translateY(2px) scale(.985)}
.chest-art{position:absolute;z-index:1;left:0;bottom:0;width:100%;height:138%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 19px 16px #041b30a6);pointer-events:none;user-select:none;-webkit-user-drag:none;transition:filter .3s ease}
.chest.busy{animation:chest-hit .36s ease-out}
.chest:focus-visible{outline:none}
.chest:focus-visible .chest-art{filter:drop-shadow(0 19px 16px #041b30a6) drop-shadow(0 0 5px #b0fff0) brightness(1.08)}
.treasure-aura{position:absolute;z-index:-1;width:75%;height:80%;border-radius:50%;background:radial-gradient(ellipse,#64fff32b 0,#fcd66e12 40%,transparent 72%);pointer-events:none}
.plinth{position:absolute;z-index:0;bottom:20%;left:13%;right:13%;height:13%;border-radius:50%;background:radial-gradient(ellipse,#65e9dc3b,transparent 70%);transform:translateY(55%);pointer-events:none}
.tap-ring{position:absolute;z-index:3;left:calc(50% - 19px);top:47%;width:38px;height:38px;border:2px solid #fff6cc;border-radius:50%;opacity:.8;box-shadow:0 3px 12px #0006;pointer-events:none;animation:tap-cue 1.8s ease-out 2}
.chest-caption{display:none}
.controls{position:absolute;left:26px;right:26px;bottom:calc(39px + var(--safe-bottom));display:flex;flex-direction:column;align-items:center}
.seals{display:flex;align-items:center;justify-content:center;gap:8px;height:49px;direction:ltr}
.seal{position:relative;display:grid;place-items:center;width:55px;height:48px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.seal img{width:100%;height:100%;object-fit:contain;opacity:.68;filter:grayscale(.4) brightness(1);transition:opacity .3s,filter .3s}
.seal.active img{opacity:1;filter:drop-shadow(0 3px 8px #3fffd866)}
.seal.active{animation:seal-unlock .5s cubic-bezier(.16,1,.3,1)}
.seal-link{width:19px;height:1px;background:#dbbf6f77}
.status{font-size:12px;line-height:1.5;min-height:17px;margin:5px 0 12px;text-align:center;color:#f4e1b7}
.action{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:11px;width:calc(100% + 8px);min-height:82px;padding:8px 50px 11px;border:0;border-radius:16px;background:transparent;color:#fff0ba;font-size:19px;font-weight:800;text-shadow:0 2px 2px #052d3a;transition:filter .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.action::before{content:"";position:absolute;z-index:-1;inset:0;background:url('./public/button-royal-v4.webp') center/100% 100% no-repeat;filter:drop-shadow(0 6px 4px #03192399);pointer-events:none;transition:filter .18s ease}
.action span{position:relative;white-space:nowrap}
.action svg{position:relative;flex:0 0 18px;width:18px;height:18px;fill:none;stroke:#ffe4a0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #061f2b)}
.action:focus-visible{outline-offset:0}
.action:active:not(:disabled),.action[aria-busy="true"]{transform:translateY(3px);filter:brightness(.94)}
.action:active:not(:disabled)::before,.action[aria-busy="true"]::before{filter:drop-shadow(0 2px 2px #03192388)}
.action:disabled:not([aria-busy="true"]){filter:grayscale(.55) brightness(.72)}
.reward-open{overflow:hidden}
.treasure-dialog{position:fixed;inset:0;width:min(392px,calc(100% - 32px));max-height:calc(100svh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow:auto;margin:auto;padding:18px 22px 24px;border:3px solid #e8bd67;border-radius:20px;background:radial-gradient(ellipse at 50% 5%,#236b68,#0b2b35 64%);color:var(--cream);text-align:center;box-shadow:inset 0 0 0 4px #154e52,inset 0 0 0 5px #b78a43,0 22px 60px #0009}
.treasure-dialog::backdrop{background:#03141ddd}
.treasure-dialog[open]{animation:reward-arrive .4s cubic-bezier(.16,1,.3,1) both}
.reward-art{position:relative;isolation:isolate;height:230px;margin:0 -8px 4px;pointer-events:none}
.reward-art::before{content:"";position:absolute;inset:-10px -4px 0;background:radial-gradient(ellipse at 50% 45%,#ffe3a055,#edba5522 37%,transparent 69%)}
.reward-art img{position:absolute;z-index:1;left:0;bottom:0;width:100%;height:113%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 13px 12px #03141d80)}
.treasure-dialog h2{margin:0;font-size:29px;line-height:1.35;font-weight:800;color:#ffe4a1;text-wrap:balance;text-shadow:0 3px 8px #0008}
.treasure-dialog p{margin:10px 0 20px;font-size:15px;line-height:1.6;color:var(--cream)}
.reward-enter{width:calc(100% + 12px);margin-inline:-6px;min-height:76px;font-size:21px;text-decoration:none}
@media(hover:hover){.enter-top:hover{filter:brightness(1.1)}.reward-enter:hover{filter:brightness(1.1)}}
@keyframes reward-arrive{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:400px){.topbar{gap:12px}.wordmark strong{font-size:clamp(20px,5.6vw,23px)}.wordmark span{font-size:12px;letter-spacing:0}.enter-top{width:134px;min-height:52px;font-size:17px;padding-inline:12px}.treasure-dialog{padding-inline:18px}.reward-art{height:210px}.treasure-dialog h2{font-size:27px}}
@media(max-width:360px){.topbar{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));gap:10px}.wordmark strong{font-size:20px}.wordmark-ornament{width:108px}.enter-top{width:128px;min-height:50px;font-size:16px;gap:7px}.controls{left:18px;right:18px}.heading{right:14px;width:136px}}
@media(max-height:640px){.reward-art{height:175px}.treasure-dialog{padding-block:14px 18px}.treasure-dialog p{margin:7px 0 12px}.reward-enter{min-height:68px}}
@media(hover:hover){.action:hover:not(:disabled){filter:brightness(1.1)}.chest:hover:not(:disabled){transform:translateY(-3px)}.chest:hover:not(:disabled) .chest-art{filter:drop-shadow(0 21px 19px #041b30a6) brightness(1.06)}}
footer{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;gap:8px;font-size:10px;color:#d1c7a7;direction:rtl}
.particles{position:absolute;inset:0;z-index:4;pointer-events:none}
.particle{position:absolute;left:50%;top:46%;width:9px;height:9px;background:#ffe5a0;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);animation:treasure-spark .7s ease-out forwards}
.sunrays{position:absolute;z-index:0;width:90%;height:110%;opacity:0;background:repeating-conic-gradient(from 0deg,transparent 0deg 22deg,#fff0a522 24deg 31deg,transparent 34deg 45deg);mask-image:radial-gradient(ellipse,#000,transparent 67%);pointer-events:none}
.game.won .sunrays{opacity:1;animation:rays-in 1s ease-out both}
.game.won .chest-art{filter:drop-shadow(0 12px 22px #10dcc147)}
.treasure-light{position:absolute;z-index:2;left:50%;bottom:0;height:138%;aspect-ratio:640/760;max-width:100%;transform:translateX(-50%);opacity:0;pointer-events:none}
.treasure-light::before{content:"";position:absolute;left:9%;top:22%;width:82%;height:39%;background:radial-gradient(ellipse at 50% 65%,#fff4bc80 0,#ffd56b40 28%,#ffc65314 48%,transparent 70%)}
.treasure-light::after{content:"";position:absolute;left:25%;top:15%;width:50%;height:34%;background:linear-gradient(to top,#fff2b56b,#ffd5761c 62%,transparent);clip-path:polygon(35% 100%,65% 100%,100% 0,0 0)}
.treasure-light i{position:absolute;z-index:1;left:var(--spark-x);top:var(--spark-y);width:var(--spark-size,12px);aspect-ratio:1;background:#fff7cf;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%);opacity:.8}
.treasure-light i:nth-child(1){--spark-x:24%;--spark-y:43%;--spark-size:14px;--spark-delay:.05s}
.treasure-light i:nth-child(2){--spark-x:70%;--spark-y:40%;--spark-size:11px;--spark-delay:.3s}
.treasure-light i:nth-child(3){--spark-x:48%;--spark-y:29%;--spark-size:15px;--spark-delay:.15s}
.treasure-light i:nth-child(4){--spark-x:76%;--spark-y:24%;--spark-size:9px;--spark-delay:.5s}
.game.won .treasure-light{opacity:1;animation:treasure-light-in .7s cubic-bezier(.16,1,.3,1) both}
.game.won .treasure-light i{animation:treasure-twinkle 1.1s ease-in-out var(--spark-delay) 3 both}
.game.won .tap-ring,.game.started .tap-ring{display:none}
.game.won .heading h1{color:#fff1bd}
.game.won .status{color:#a0ffdf}
@keyframes chest-hit{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-3deg) scale(.98)}65%{transform:rotate(3deg) scale(1.035)}}
@keyframes tap-cue{0%{transform:scale(.7);opacity:0}35%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes seal-unlock{from{transform:scale(.75)}to{transform:scale(1)}}
@keyframes treasure-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(90deg) scale(.5)}}
@keyframes rays-in{from{opacity:0;transform:scale(.7) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes treasure-light-in{from{opacity:0}to{opacity:1}}
@keyframes treasure-twinkle{0%,100%{opacity:.8;transform:translateY(0) scale(.75)}45%{opacity:1;transform:translateY(-4px) scale(1.15)}70%{opacity:.4;transform:translateY(-2px) scale(.65)}}
@media(min-width:700px){.game{border-left:1px solid #f4cd7322;border-right:1px solid #f4cd7322}}
@media(max-height:740px){.heading{top:max(94px,calc(env(safe-area-inset-top) + 76px));right:max(16px,env(safe-area-inset-right));width:150px}.heading h1{font-size:28px}.heading p{font-size:12px}.treasure-zone{bottom:calc(172px + var(--safe-bottom));height:31svh}.controls{bottom:calc(33px + var(--safe-bottom))}.seals{height:42px}.seal{height:42px;width:48px}.status{font-size:12px;margin:4px 0 9px}.action{min-height:70px;font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-height:620px){.heading{top:max(90px,calc(env(safe-area-inset-top) + 72px));width:140px}.heading h1{font-size:25px}.heading p{margin-top:5px}.treasure-zone{height:29svh}.controls{bottom:calc(29px + var(--safe-bottom))}}
@media(orientation:landscape) and (min-width:600px) and (max-height:560px){.game{width:min(100%,960px);height:100svh;min-height:320px;max-height:560px}.palace{object-position:50% 0%}.shade{background:linear-gradient(90deg,#041b3012,transparent 38%,#041c22bb 74%),linear-gradient(180deg,#071d3838,transparent 45%,#041c2280)}.topbar{top:max(12px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.wordmark{width:200px}.wordmark strong{font-size:23px}.heading{top:max(91px,calc(env(safe-area-inset-top) + 76px));right:max(22px,env(safe-area-inset-right));width:40%}.heading h1{font-size:26px;line-height:1.15}.heading p{margin-top:5px}.treasure-zone{left:0;right:44%;bottom:18px;height:58svh}.controls{left:auto;right:max(22px,env(safe-area-inset-right));width:40%;bottom:calc(30px + var(--safe-bottom))}.action{min-height:68px;padding-inline:36px;font-size:18px}.seals{height:38px}.seal{height:38px;width:44px}.status{margin:4px 0 8px}.treasure-dialog{width:min(580px,calc(100% - 32px));padding:20px 24px;direction:ltr;grid-template-columns:180px minmax(0,1fr);column-gap:20px;align-items:center}.treasure-dialog[open]{display:grid}.reward-art{grid-column:1;grid-row:1 / span 3;height:210px;margin:0}.treasure-dialog h2{grid-column:2;font-size:25px;direction:rtl}.treasure-dialog p{grid-column:2;margin:6px 0 10px;direction:rtl}.reward-enter{grid-column:2;width:100%;margin-inline:0;min-height:66px;padding-inline:30px;font-size:20px;direction:rtl}}
@media(prefers-reduced-motion:reduce){.enter-top[data-pulse-active="true"]{animation:none}}