/* Old-school fantasy game look: stone frames, gold title, parchment chat box. */
*{box-sizing:border-box}
html,body{margin:0;background:#0B0A08}
body{color:#FFFF33;font-family:VT323,ui-monospace,monospace;font-size:20px}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 16px;overflow:hidden}
h1{margin:0;font:400 clamp(44px,9vw,112px)/1 MedievalSharp,Georgia,serif;text-align:center}
h1 a{color:#FFC93C;text-shadow:3px 3px 0 #000;text-decoration:none}
h1 a:hover{color:#FFE08A}
.frame{width:100%;max-width:1040px;border:4px solid #2A241B;box-shadow:inset 0 0 0 3px #6B5D47,0 0 0 2px #6B5D47}
.view{position:relative;overflow:hidden;background:#6FA8D6}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
nav{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));padding:20px 0 16px;text-align:center}
nav a{display:block;min-height:44px;color:#FFFF33;text-shadow:1px 1px 0 #000;text-decoration:none}
nav a:hover,nav a:focus-visible{color:#33FFFF}
nav a:focus-visible{outline:3px solid #33FFFF;outline-offset:-3px}
.hang{display:block;transform-origin:50% 0;animation:sway 3.2s steps(8) infinite}
.string{display:block;width:4px;margin:0 auto;background:#15120D}
.acorn{display:block;width:92px;height:120px;margin:-1px auto 0}
.label{display:block;max-width:150px;margin:4px auto 0;font-size:25px;line-height:1}
.label.big{max-width:none;font-size:40px;color:#FFFF33;text-shadow:2px 2px 0 #000}
.sub{display:block;font-size:20px;line-height:1;color:#FF9933}
.one{position:relative;padding:20px 16px 40px;text-align:center}
.chat{background:#CDBE94;color:#1A1208;padding:10px 14px;font-size:23px;line-height:1.2}
.hoverbox{background:#4A4033;color:#FFFF33;padding:10px 14px;font-size:23px;line-height:1.2;text-shadow:1px 1px 0 #000}
.hoverbox[hidden],.gallery[hidden]{display:none}
.gallery{width:100%;max-width:1040px;display:flex;flex-direction:column;gap:16px}
.post{background:#4A4033;padding:12px}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.photos a{display:block}
.photos img{display:block;width:100%;height:auto;border:3px solid #2A241B}
.caption{margin:10px 0 0;padding:8px 12px;background:#CDBE94;color:#1A1208;font-size:22px;line-height:1.2}
.red{color:#7A0F0F}.blue{color:#0B2F7A}
.back{min-height:44px;padding:8px 18px;background:#4A4033;border:3px solid #2A241B;box-shadow:inset 0 0 0 2px #6B5D47;color:#FFFF33;font-size:24px;text-decoration:none}
.back:hover{color:#33FFFF}
/* Phones stack the acorns in rows, so each row gets its own beam to hang from. */
@media (max-width:640px){
  nav{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  nav a{border-top:10px solid #6B4A2B;padding-bottom:14px}
  nav a:last-child{grid-column:1/-1}
}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.hang{animation:none}}
html,body,a,button{cursor:url(/cursors/arrow.png?v=5e1dee0ada) 0 0,auto}
a[href^="https://tools."]{cursor:url(/cursors/key.png?v=f466e983e2) 1 12,pointer}