/* 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}
.view nav{padding-bottom:120px}
.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}
.said{background:#CDBE94;color:#7A0F0F;padding:10px 14px;font-size:23px;line-height:1.2}
nav a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gamemenu{position:fixed;z-index:50;min-width:190px;background:#5D5447;border:2px solid #000;box-shadow:0 0 0 1px #6B5D47;font-family:VT323,ui-monospace,monospace;font-size:22px;line-height:1}
.gamemenu .head{padding:5px 8px;background:#000;color:#5D5447;font-weight:400}
.gamemenu button{display:block;width:100%;min-height:36px;padding:4px 8px;background:none;border:0;text-align:left;color:#fff;font:inherit;text-shadow:1px 1px 0 #000;cursor:pointer}
.gamemenu button span{color:#FF9933}
.gamemenu button:hover,.gamemenu button:focus-visible{background:#000;color:#FFFF33;outline:0}
.acorn.shaking{animation:shake .5s steps(6);transform-origin:50% 0}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.book{position:absolute;left:50%;bottom:4px;display:block;width:84px;height:66px;margin-left:-42px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.booksvg{display:block;width:100%;height:100%}
.book:focus-visible{outline:2px solid #33FFFF;outline-offset:2px}
.booksvg.shaking{animation:shake .5s steps(6)}
.panel{width:100%;max-width:1040px;background:#4A4033;padding:16px}
.panel h2{margin:0 0 12px;font:400 32px/1 MedievalSharp,Georgia,serif;color:#FFC93C;text-shadow:2px 2px 0 #000}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;font-size:24px;color:#FF9933;text-shadow:1px 1px 0 #000}
.field input,.field textarea{width:100%;padding:10px;background:#CDBE94;color:#1A1208;border:3px solid #2A241B;font:inherit;font-size:22px;text-shadow:none}
.field textarea{min-height:100px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.go{min-height:48px;padding:0 22px;background:#FFC93C;color:#1A1208;border:3px solid #2A241B;font:inherit;font-size:26px;cursor:pointer}
.go:disabled{opacity:.5;cursor:default}
.note{padding:8px 0;border-bottom:2px solid #2A241B;font-size:23px;line-height:1.2;color:#F4E8CF;overflow-wrap:anywhere}
.who{font-size:19px;color:#FF9933}
html,body{cursor:url(/cursors/arrow.png) 0 0,auto}
a,button,.chip,.go,input[type=file]{cursor:url(/cursors/hand.png) 11 0,pointer}
a[data-knock]{cursor:url(/cursors/key.png) 1 12,pointer}
a.book{cursor:url(/cursors/quill.png) 0 28,pointer}
.clickx{position:fixed;z-index:60;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;background:linear-gradient(45deg,transparent 41%,#E0241A 41% 59%,transparent 59%),linear-gradient(-45deg,transparent 41%,#E0241A 41% 59%,transparent 59%);animation:clickx .42s steps(4) forwards}
@keyframes clickx{0%{transform:scale(1.2)}100%{transform:scale(.5);opacity:0}}
.stage{width:100%;max-width:1040px;display:flex;gap:16px;align-items:stretch}
.stage.hasside{max-width:1360px}
.maincol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.gbwrite{background:#4A4033;padding:10px 14px}
.gbwrite[hidden],.gbinner[hidden]{display:none}
.gbline{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;font-size:23px;color:#FF9933;text-shadow:1px 1px 0 #000}
.gbline span{flex:0 0 52px;padding-top:6px}
.gbline input,.gbline textarea{flex:1 1 auto;min-width:0;padding:6px 10px;background:#CDBE94;color:#1A1208;border:3px solid #2A241B;font:inherit;font-size:22px;text-shadow:none;resize:vertical}
.gbfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.gbclose{min-height:48px;padding:0 18px;background:#3E3529;color:#FFFF33;border:3px solid #2A241B;font:inherit;font-size:24px;text-shadow:1px 1px 0 #000}
.gbclose:hover{color:#33FFFF}
.gbmsg{flex:1 1 240px;font-size:20px;line-height:1.15;color:#F4E8CF}
.gbside{flex:0 0 280px;width:280px;max-width:none;position:relative;min-height:420px;background:#4A4033}
.gbinner{position:absolute;inset:8px;display:flex;flex-direction:column;gap:8px}
.slots{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:4px;padding:6px;background:#3E3529;box-shadow:inset 0 0 0 2px #2A241B}
.slots span{background:#4A4033;box-shadow:inset 0 0 0 1px #2A241B}
.gbtitle{flex:none;color:#FF9933;font-size:26px;text-align:center;text-shadow:1px 1px 0 #000}
.gbnotes{flex:1 1 0;min-height:0;overflow-y:auto;padding:8px 10px;background:#15120D;border:3px solid #2A241B;color:#F4E8CF;font-size:22px;line-height:1.2}
.gbnotes .note{padding:6px 0;border-bottom:2px solid #2A241B}
@media (max-width:900px){.stage{flex-direction:column}.gbside{display:none;flex:none;width:100%;height:360px}.stage.gbopen .gbside{display:block}}
/* chat effects */
.fx{color:#FFFF33;overflow-wrap:anywhere}
.c-yellow{color:#FFFF33}.c-red{color:#FF3B3B}.c-green{color:#3BFF3B}.c-cyan{color:#33FFFF}.c-purple{color:#D07BFF}.c-white{color:#FFF}
.c-flash1{animation:flash1 .5s steps(1) infinite}.c-flash2{animation:flash2 .5s steps(1) infinite}.c-flash3{animation:flash3 .5s steps(1) infinite}
.c-glow1{animation:glow1 3s linear infinite}.c-glow2{animation:glow2 3s linear infinite}.c-glow3{animation:glow3 3s linear infinite}
@keyframes flash1{0%{color:#FF3B3B}50%{color:#FFFF33}}
@keyframes flash2{0%{color:#33FFFF}50%{color:#3B7BFF}}
@keyframes flash3{0%{color:#3BFF3B}50%{color:#B8FFB8}}
@keyframes glow1{0%,100%{color:#FF3B3B}33%{color:#FFFF33}66%{color:#3BFF3B}}
@keyframes glow2{0%,100%{color:#FF3B3B}33%{color:#D07BFF}66%{color:#3B7BFF}}
@keyframes glow3{0%,100%{color:#FFF}33%{color:#3BFF3B}66%{color:#33FFFF}}
.fxword{display:inline-block;white-space:nowrap}
.fxch{display:inline-block}
.e-wave .fxch{animation:fxwave 1s ease-in-out infinite}
.e-wave2 .fxch{animation:fxwave2 1.2s ease-in-out infinite}
.e-shake .fxch{animation:fxshake .28s steps(3) infinite}
.e-wave,.e-wave2{padding:5px 0}
.e-scroll,.e-slide{overflow:hidden;white-space:nowrap}
.fxin{display:inline-block}
.e-scroll .fxin{padding-left:100%;animation:fxscroll 8s linear infinite}
.e-slide .fxin{animation:fxslide 3s steps(12) infinite}
@keyframes fxwave{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes fxwave2{0%,100%{transform:translate(-3px,-5px)}50%{transform:translate(3px,5px)}}
@keyframes fxshake{0%{transform:translate(0,0)}33%{transform:translate(1px,-2px)}66%{transform:translate(-1px,2px)}}
@keyframes fxscroll{to{transform:translateX(-100%)}}
@keyframes fxslide{0%{transform:translateY(-120%)}25%,75%{transform:translateY(0)}100%{transform:translateY(120%)}}
@media (prefers-reduced-motion:reduce){.fx,.fx *{animation:none!important}.e-scroll .fxin{padding-left:0}}
.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){
  .book{left:auto;right:8px;margin-left:0}
  nav,.view nav{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;padding-bottom:24px}
  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}}