/* A real photo inside a responsive, separately layered woodland frame. */
html body dialog#modal.story-clue-dialog{
 width:min(540px,calc(100vw - 20px));max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px);
 box-sizing:border-box;padding:14px 16px 19px!important;
 border:20px solid transparent!important;border-image:url('/assets/hunt-panels/frame.webp') 210 / 34px / 0 stretch!important;
 border-radius:0!important;background:#f7e5bc url('/assets/hunt-panels/parchment.webp') center/600px auto!important;
 background-clip:padding-box!important;color:#113b25!important;box-shadow:0 18px 55px #001c1ec9!important;
 overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;outline:0!important;
}
html body dialog#modal.story-clue-dialog::backdrop{background:#062921b8;backdrop-filter:blur(5px)}
html body dialog#modal.story-clue-dialog .dialog-top{display:flex;align-items:center;gap:14px;border:0!important;padding:0 0 14px!important;margin:0!important;background:none!important}
html body dialog#modal.story-clue-dialog .dialog-top h2{flex:1;min-width:0;text-align:center;font:800 clamp(25px,6vw,39px)/1.1 Fraunces,Georgia,serif!important;color:#073e26!important;text-shadow:0 1px #fff8!important;letter-spacing:-.5px}
html body dialog#modal.story-clue-dialog .dialog-top .close{flex:0 0 48px;width:48px;height:48px;min-height:48px;border-radius:50%!important;font:400 36px/1 system-ui!important;border:3px solid #fce398!important;background:linear-gradient(155deg,#ff7776 0%,#db1736 45%,#9a0325 100%)!important;color:white!important;box-shadow:inset 0 2px 3px #fff9,inset 0 -3px 3px #66091b,0 3px 0 #7a3c12,0 5px 9px #58241150!important;display:grid;place-items:center;padding:0!important;text-shadow:0 1px 2px #6c0018!important}
html body dialog#modal.story-clue-dialog .clue-detail{position:relative;padding:0!important;margin:0 0 9px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
html body dialog#modal.story-clue-dialog .clue-photo-mount{width:fit-content;max-width:100%;margin:auto;padding:5px;background:linear-gradient(120deg,#4f250f,#aa6427 45%,#68300e);border:2px solid #d4a44b;border-radius:12px;box-shadow:inset 0 0 0 2px #3e1d0d,0 4px 6px #53280755;overflow:hidden}
html body dialog#modal.story-clue-dialog .modal-photo{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:min(51dvh,530px)!important;margin:0 auto!important;object-fit:contain!important;border:0!important;border-radius:5px!important;background:transparent!important;box-shadow:none!important}
html body dialog#modal.story-clue-dialog .photo-caption{display:block!important;position:static!important;padding:10px 12px!important;margin:12px 0 0!important;background:#fff3d5 url('/assets/hunt-panels/parchment.webp') center/500px auto!important;color:#0d3b24!important;border:1px solid #b47e35;border-radius:9px!important;box-shadow:0 3px 0 #b88a4160;text-align:center!important;font:800 clamp(23px,5.5vw,32px)/1.15 Fraunces,Georgia,serif!important;text-shadow:none!important;overflow-wrap:anywhere}
html body dialog#modal.story-clue-dialog>p{margin:12px 0!important;color:#163f29!important;text-shadow:none!important;font:800 clamp(16px,4vw,20px)/1.4 Nunito,system-ui,sans-serif!important;text-align:center}
html body dialog#modal.story-clue-dialog .story-riddle{background:#fff4d8!important;color:#254530!important;border-radius:9px;margin:12px 0 0;font:700 16px/1.5 Nunito,sans-serif!important}
html body dialog#modal.story-clue-dialog>.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px!important;margin:17px 0 0!important;padding:12px 16px!important;width:100%;border:3px solid #e8bd56!important;border-radius:22px!important;background:linear-gradient(115deg,#006b4be8,#003f2be8),url('/assets/retro-camera/chestnut-leather.webp') center/450px,#006a43!important;color:#fff3cc!important;box-shadow:inset 0 2px 2px #fff7,inset 0 -3px #002f1c,0 4px 0 #60380e,0 6px 9px #613e2438!important;font:800 clamp(23px,5.2vw,31px)/1.1 Fraunces,Georgia,serif!important;text-shadow:0 2px 1px #002c1b!important}
html body dialog#modal.story-clue-dialog>.btn svg{width:29px;height:29px;flex:0 0 29px;stroke-width:2}
html body dialog#modal.story-clue-dialog>.btn:active:not(:disabled){transform:translateY(2px)}
html body dialog#modal.story-clue-dialog>.btn:disabled{opacity:.65;cursor:default}
html body dialog#modal.story-clue-dialog :is(button,a):focus-visible{outline:3px solid #147ca8!important;outline-offset:4px}
@media(max-width:380px){html body dialog#modal.story-clue-dialog{border-width:16px!important;padding:9px 8px 16px!important}html body dialog#modal.story-clue-dialog .dialog-top{gap:6px}html body dialog#modal.story-clue-dialog .modal-photo{max-height:46dvh!important}}
@media(max-height:620px){html body dialog#modal.story-clue-dialog .modal-photo{max-height:40dvh!important}}

/* Draw one centred cross, independent of the older shared close-button artwork. */
html body dialog#modal.story-clue-dialog .dialog-top .close::before,html body dialog#modal.story-clue-dialog .dialog-top .close::after{content:none!important}
