.btn { font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 9px 14px; color: #fcfaf4; background: var(--ink);
       box-shadow: 3px 4px 0 rgba(60,45,30,.25); cursor: pointer; touch-action: manipulation; }
.btn:active { transform: translateY(2px); box-shadow: 1px 2px 0 rgba(60,45,30,.25); }
.treetools input, .gb input, .gb textarea, .upload input {
  font: inherit; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--edge); background: var(--card); color: var(--ink); }

/* ---------- traitor stew */
.stew { margin-top: 26px; background: linear-gradient(#2f2a20, #1f1a14); color: #f3ecde; border-radius: 20px; padding: 22px 16px 26px; text-align: center;
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M40 6 L18 30' stroke='%23966a3e' stroke-width='6' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='36' rx='10' ry='7' fill='%23c8a070' stroke='%235a3a1e' stroke-width='2'/%3E%3C/svg%3E") 12 36, grab; }
.stew p.lead { color: #d8c8b0; margin: 0 auto 10px; }
.kitchen { position: relative; height: 330px; max-width: 640px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.shelf { position: absolute; left: 0; top: 30px; width: 150px; height: 200px; border-bottom: 10px solid #7a5230; }
.tr { position: absolute; width: 120px; text-align: center; cursor: grab; z-index: 3; touch-action: none; }
.tr img { max-height: 110px; image-rendering: pixelated; pointer-events: none; }
.tr .nm { font-size: 12px; background: #c83c32; color: #fff; border-radius: 6px; padding: 1px 6px; }
.tr.dragging { cursor: grabbing; z-index: 9; transform: rotate(-8deg) scale(1.08); }
.tr.inpot { animation: boil 1.1s ease-in-out infinite; }
.tr.inpot .nm { display: none; }
@keyframes boil { 50% { transform: translateY(-8px) rotate(4deg); } }
.potwrap { position: absolute; left: 50%; bottom: 40px; width: 300px; margin-left: -110px; height: 220px; }
.stewtop { position: absolute; left: 0; right: 0; top: 40px; height: 54px; border-radius: 50%; background: radial-gradient(#9cc070, #6e9a4a); border: 6px solid #1e1c22; z-index: 2; }
.potbody { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; background: #37323c; border-radius: 0 0 70px 70px; border: 6px solid #1e1c22; border-top: 0; z-index: 4;
           display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6a6470; letter-spacing: 3px; }
.ladle { position: absolute; left: 50%; top: -60px; width: 14px; height: 150px; margin-left: -7px; background: linear-gradient(90deg, #7a5230, #b58a5a);
         border-radius: 7px; transform-origin: 50% 100%; transform: rotate(var(--a, 20deg)); z-index: 3; }
.fire { position: absolute; left: 30px; right: 30px; bottom: -36px; height: 60px; display: flex; justify-content: space-around; align-items: flex-end; z-index: 1; }
.fire i { width: 36px; height: calc(30px + var(--heat, 0) * .9px); background: linear-gradient(#ffd24a, #f07828 60%, #c83c32);
          clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: flick .35s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.fire i:nth-child(2n) { animation-delay: -.15s; } .fire i:nth-child(3n) { animation-delay: -.25s; }
@keyframes flick { to { transform: scaleY(.75) skewX(6deg); } }
.bubble { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c8e0a0; z-index: 3; animation: rise 1s ease-out forwards; }
@keyframes rise { to { transform: translateY(-60px) scale(1.6); opacity: 0; } }
.doneness { max-width: 420px; margin: 8px auto 12px; }
.doneness .bar { height: 16px; border-radius: 8px; background: #3a3228; overflow: hidden; }
.doneness .bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f0c040, #f07828, #c83c32, #4a2a1a); transition: width .2s; }
.doneness span { display: block; margin-top: 4px; font-weight: 700; }
.served { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: #ffcc4a;
          text-shadow: 3px 3px 0 #6e1e14; z-index: 10; animation: pop .3s; pointer-events: none; }
@media (max-width: 700px) { .potwrap { width: 206px; margin-left: -60px; } .shelf { width: 104px; top: 0; height: 250px; } .tr { width: 100px; } .tr img { max-height: 84px; } }

/* ---------- tree tools */
.treetools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.treetools .findwrap { position: relative; flex: 1 1 200px; max-width: 320px; display: flex; }
.treetools input { flex: 1; min-width: 0; }
.findsugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--card); border: 2px solid var(--edge);
  border-radius: 12px; box-shadow: 3px 6px 0 rgba(60,45,30,.2); max-height: 300px; overflow: auto; text-align: left; }
.findsugg[hidden] { display: none; }
.findsugg button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 6px 10px; font: inherit; font-weight: 700;
  color: var(--ink); text-align: left; cursor: pointer; border-bottom: 1px dashed var(--edge); }
.findsugg button:last-child { border-bottom: 0; }
.findsugg button:hover, .findsugg button.on { background: #fff3d6; }
.findsugg img, .findsugg span { width: 34px; height: 34px; object-fit: contain; object-position: bottom; image-rendering: pixelated; display: grid; place-items: center; }
.findsugg i { display: block; padding: 8px 12px; color: var(--muted); }
.leaf.glow { animation: glow 1s ease-in-out 4; position: relative; z-index: 3; }
.leaf.glow .nm { background: #ffcc4a; }
@keyframes glow { 50% { transform: scale(1.5); filter: drop-shadow(0 0 12px #ffe680) drop-shadow(0 0 4px #fff); } }
.tree.shake .canopy { animation: shake .12s 6 linear; }
@keyframes shake { 25% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(6px) rotate(1deg); } }
.falling { position: fixed; top: -20px; width: 18px; height: 12px; background: #78af5f; border-radius: 0 12px; z-index: 40; pointer-events: none;
           animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }

/* ---------- guestbook, votes, uploads */
.gb { display: grid; gap: 8px; max-width: 640px; background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 16px;
      box-shadow: 4px 6px 0 rgba(60,45,30,.12); }
.gb textarea { min-height: 80px; resize: vertical; }
.gb .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gb .row input { flex: 1 1 180px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.note-card { position: relative; background: #fff7c8; padding: 14px 14px 12px 70px; min-height: 92px; box-shadow: 4px 6px 0 rgba(60,45,30,.15);
             transform: rotate(var(--r)); border-radius: 4px; }
.note-card img { position: absolute; left: 6px; bottom: 8px; max-width: 58px; max-height: 70px; image-rendering: pixelated; }
.note-card b { display: block; } .note-card p { margin: 4px 0; word-wrap: break-word; } .note-card time { color: var(--muted); font-size: 12px; }
.soon { color: var(--muted); background: var(--card); border: 2px dashed var(--edge); border-radius: 14px; padding: 14px; max-width: 640px; }
.reacts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.vote { border: 2px solid var(--edge); background: #fff; border-radius: 16px; padding: 3px 10px; font: inherit; font-size: 14px; cursor: pointer;
        display: inline-flex; align-items: center; gap: 4px; touch-action: manipulation; }
.vote .em { font-style: normal; display: inline-block; }
.vote.on { border-color: var(--red); color: var(--red); }
.vote.hate.on { border-color: var(--ink); color: var(--ink); background: #f0e6e6; }
.vote.boo .em { animation: boo .5s; }
@keyframes boo { 30% { transform: scale(1.8) rotate(-15deg); } 60% { transform: scale(1.3) rotate(10deg); } }
.photo .loved.hated { top: 36px; background: var(--ink); }
.photo .loved { position: absolute; left: 10px; top: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.upload { margin-top: 30px; }
.upload .gb input[type=file] { padding: 8px; }
.msg { font-size: 14px; } .msg.ok { color: var(--green); } .msg.err { color: var(--red); }
.counter small { display: block; font-size: 14px; color: #d8c8b8; margin-top: 4px; }
.memhead { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.memhead .lead { margin: 0; flex: 1 1 260px; }
.addmem { background: var(--purple); font-size: 16px; padding: 11px 18px; }
.upload.flash .gb { animation: flash 1.2s 2; }
@keyframes flash { 50% { box-shadow: 0 0 0 4px var(--purple), 4px 6px 0 rgba(60,45,30,.12); } }

/* ---------- guestbook v2 */
.moblabel { font-size: 15px; }
.mobs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.mob { width: 100%; aspect-ratio: 1; height: auto; border: 2px solid var(--edge); background: #fff; border-radius: 12px; cursor: pointer; padding: 4px;
       display: flex; align-items: flex-end; justify-content: center; touch-action: manipulation; }
.mob img { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.mob:hover img { transform: translateY(-3px); }
.mob.on { border-color: var(--purple); background: #f4e8f8; box-shadow: 0 0 0 2px var(--purple); }
.mob.on img { animation: idle 1.2s ease-in-out infinite; }
@keyframes idle { 50% { transform: translateY(-3px); } }
.mega { font-size: 14px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.note-card { padding-left: 74px; min-height: 100px; }
.note-card img { max-width: 60px; max-height: 64px; left: 7px; bottom: auto; top: 14px; }
.note-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.fame { display: inline-flex; align-items: center; gap: 4px; }
.fame b { min-width: 26px; text-align: center; display: inline-block; }
.fame button { border: 2px solid transparent; background: #fff; border-radius: 10px; padding: 1px 5px; cursor: pointer; font-size: 14px; touch-action: manipulation; }
.fame button.on { border-color: var(--ink); }
.note-card.faded { opacity: .38; filter: grayscale(.6); }
.note-card.shout { background: #ffe6a8; box-shadow: 4px 6px 0 rgba(60,45,30,.15), 0 0 0 3px #f0a020 inset; }
.smega { position: sticky; top: 56px; z-index: 19; display: flex; align-items: center; gap: 8px; margin: 0 auto; max-width: 1180px;
         background: linear-gradient(90deg, #f0a020, #f5c84a); color: #3a2410; padding: 6px 10px; border-radius: 0 0 14px 14px;
         box-shadow: 0 4px 0 rgba(60,45,30,.2); overflow: hidden; }
.smega[hidden] { display: none; }
.smega .tag { background: #fff; padding: 2px 8px; }
.smega .track { flex: 1; overflow: hidden; white-space: nowrap; }
.smega .track span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
.smega .track img { height: 24px; vertical-align: middle; image-rendering: pixelated; }
.smega button { border: 0; background: none; font-size: 20px; cursor: pointer; color: #3a2410; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 700px) { .smega { top: 98px; } .mobs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mob img { max-width: 80%; max-height: 80%; } }

/* ---------- founders: squeaky hammer + arcade */
#founderGrid .card, #coreGrid .card, #earlyGrid .card, #mergeList .card { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect x='24' y='20' width='7' height='34' rx='3' fill='%23f6d36b' stroke='%235a3a1e' stroke-width='2' transform='rotate(-35 28 37)'/%3E%3Crect x='6' y='4' width='34' height='22' rx='9' fill='%23ff7eb6' stroke='%235a3a1e' stroke-width='2.5' transform='rotate(-35 23 15)'/%3E%3Crect x='10' y='8' width='9' height='14' rx='4' fill='%23ffd1e6' transform='rotate(-35 23 15)'/%3E%3C/svg%3E") 10 10, pointer;
                    user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.card.bonked { animation: bonk .35s; }
@keyframes bonk { 25% { transform: scale(1.06, .82) translateY(8px); } 60% { transform: scale(.96, 1.06); } }
.card.bonked .pic img { animation: dizzy .35s; }
@keyframes dizzy { 30% { transform: rotate(-12deg) scale(1.1, .8); } }
.ouch { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #fff; border: 2px solid var(--ink); border-radius: 12px;
        padding: 2px 8px; font-size: 13px; white-space: nowrap; z-index: 5; animation: pop .2s, fadeup .9s forwards; pointer-events: none; }
@keyframes fadeup { 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -18px); } }
.bonkstar { position: fixed; pointer-events: none; z-index: 60; font-size: 18px; animation: starfly .7s ease-out forwards; }
@keyframes starfly { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 1; }
                     to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-46px) rotate(180deg); opacity: 0; } }
.bonks { position: absolute; bottom: 6px; right: 8px; font-size: 11px; color: var(--muted); }
.card.mostbonked::after { content: "🏆 most bonked"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #e0559a; color: #fff;
                          font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.arcade { position: fixed; inset: 0; z-index: 70; background: rgba(20,14,30,.75); display: flex; align-items: center; justify-content: center; padding: 10px; }
.arcade[hidden] { display: none; }
.cabinet { position: relative; width: min(560px, 100%); max-height: 96vh; overflow: auto; background: linear-gradient(#2a1d48, #160f28); border: 6px solid #e0559a;
           border-radius: 22px; padding: 16px 14px 18px; color: #fff; font-family: "Courier New", monospace; box-shadow: 0 0 30px #e0559a88;
           cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect x='24' y='20' width='7' height='34' rx='3' fill='%23f6d36b' stroke='%235a3a1e' stroke-width='2' transform='rotate(-35 28 37)'/%3E%3Crect x='6' y='4' width='34' height='22' rx='9' fill='%23ff7eb6' stroke='%235a3a1e' stroke-width='2.5' transform='rotate(-35 23 15)'/%3E%3C/svg%3E") 10 10, pointer; }
.cabinet .x { position: absolute; top: 4px; right: 10px; border: 0; background: none; color: #fff; font-size: 28px; cursor: pointer; z-index: 3; }
.hud { display: flex; justify-content: space-around; font-weight: 700; letter-spacing: 1px; margin: 4px 30px 12px 0; }
.hud b { color: #ffe066; font-size: 22px; }
/* the playfield: a little Henesys meadow, holes with a dirt mound in front so characters pop OUT of them */
.tbar { height: 10px; background: #0b0716; border: 2px solid #4a3a6a; border-radius: 6px; margin: 0 4px 10px; overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7dff8a, #ffe066); border-radius: 4px; transition: width .1s linear; }
.tbar i.low { background: linear-gradient(90deg, #ff5a5a, #ff9a5a); animation: blinkbar .4s infinite alternate; }
@keyframes blinkbar { to { opacity: .45; } }
.field { position: relative; border-radius: 14px; overflow: hidden; padding: 34px 8px 10px; border: 3px solid #0b0716;
  background: radial-gradient(ellipse 140% 60% at 50% 118%, #4f9a3a 0 58%, transparent 59%),
              linear-gradient(#7cc8f4 0%, #b9e6ff 30%, #9fd67a 31%, #74b84f 100%); }
.field::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 14px;   /* grass tufts along the horizon */
  background: radial-gradient(circle at 8px 14px, #5fa845 8px, transparent 9px) 0 0 / 16px 14px repeat-x; }
.cloud { position: absolute; height: 18px; border-radius: 20px; background: #fff; opacity: .9; animation: drift 18s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 26px; height: 26px; left: 10px; top: -12px; } .cloud::after { width: 18px; height: 18px; left: 30px; top: -7px; }
.cloud.c1 { width: 70px; top: 8px; left: -80px; } .cloud.c2 { width: 54px; top: 22px; left: -80px; animation-delay: -7s; animation-duration: 24s; }
.cloud.c3 { width: 60px; top: 4px; left: -80px; animation-delay: -15s; animation-duration: 21s; }
@keyframes drift { to { transform: translateX(680px); } }
.holes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hole { position: relative; height: 128px; }
.hole .back { position: absolute; left: 12%; right: 12%; bottom: 14px; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #120a04 40%, #2e1b0c 75%); box-shadow: inset 0 4px 6px rgba(0,0,0,.6); }
.hole .pit { position: absolute; left: 0; right: 0; top: -30px; bottom: 29px; overflow: hidden; }   /* bottom edge = middle of the hole */
.hole .mole { position: absolute; left: 0; right: 0; bottom: -4px; height: 112px; display: flex; align-items: flex-end; justify-content: center;
  transform: translateY(105%); transition: transform .16s ease-in; }
.hole.up .mole { transform: translateY(0); transition: transform .22s cubic-bezier(.3, 1.7, .5, 1); }
.hole.hit .mole { transform: translateY(12%) scale(1.08, .78); transition: transform .08s; }
.hole.hit .mole img { filter: brightness(0); opacity: .6; }   /* bonked: black silhouette, ignore it */
.hole.hit .mk { display: none; }
.hole .front { position: absolute; left: 4%; right: 4%; bottom: 0; height: 30px; border-radius: 0 0 50% 50% / 0 0 100% 100%; z-index: 2;
  background: linear-gradient(#8a5a2e, #5e3a1a); box-shadow: 0 -3px 0 #3f9a35, 0 4px 6px rgba(0,0,0,.35); }
.hole .front::before { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; height: 10px;   /* grassy rim */
  background: radial-gradient(circle at 6px 10px, #5fb84a 6px, transparent 7px) 0 0 / 12px 10px repeat-x; }
.mole img { max-height: 86px; max-width: 80%; image-rendering: pixelated; pointer-events: none; transform: scale(1.25); transform-origin: 50% 100%;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff); }
.mole .mk { position: absolute; top: 0; right: 12%; font-size: 24px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.mole .dizzy { position: absolute; top: -4px; left: 50%; font-size: 22px; display: none; transform: translateX(-50%); }
.hole.hit .dizzy { display: block; animation: dizzy .4s linear infinite; }
@keyframes dizzy { to { transform: translateX(-50%) rotate(360deg); } }
/* effects */
.hammer { position: absolute; z-index: 6; width: 64px; height: 64px; margin: -54px 0 0 -10px; pointer-events: none; transform-origin: 30px 54px;
  animation: swing .22s ease-in forwards; }
@keyframes swing { from { transform: rotate(-70deg); } 55% { transform: rotate(18deg); } to { transform: rotate(8deg); opacity: 0; } }
.bonk { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; font: 900 18px "Courier New", monospace; color: #3a1a00;
  padding: 14px 16px; background: #ffe066; clip-path: polygon(50% 0, 61% 30%, 98% 20%, 72% 48%, 100% 72%, 64% 70%, 54% 100%, 40% 72%, 4% 86%, 28% 56%, 0 30%, 38% 32%);
  animation: burst .45s ease-out forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) scale(.3); } 30% { transform: translate(-50%, -50%) scale(1.1); } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.dmg { position: absolute; z-index: 7; transform: translate(-50%, 0); pointer-events: none; text-align: center; white-space: nowrap;
  font: 900 34px/1 Ubuntu, Arial Black, sans-serif; background: linear-gradient(#fff7b0, #ffb12a 55%, #ff7a12); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 1.5px #5a2600; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45)); animation: dmgup .9s ease-out forwards; }
.dmg small { display: block; font-size: 13px; letter-spacing: 2px; -webkit-text-stroke: .8px #3a0050; }
.dmg.crit { background-image: linear-gradient(#ffe0ff, #ff6fd8 50%, #a02cff); -webkit-text-stroke-color: #3a0050; font-size: 40px; }
.dmg.neg { background-image: linear-gradient(#ffd0d0, #ff4040 55%, #a00000); -webkit-text-stroke-color: #400; }
@keyframes dmgup { from { transform: translate(-50%, 10px) scale(.6); } 20% { transform: translate(-50%, -8px) scale(1.15); } 70% { opacity: 1; }
  to { transform: translate(-50%, -34px) scale(1); opacity: 0; } }
.miss { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; font: 700 14px "Courier New", monospace; color: #fff;
  text-shadow: 1px 1px 0 #000; opacity: .8; animation: fadeup .6s forwards; }
.combo { position: absolute; top: 6px; left: 0; right: 0; text-align: center; z-index: 4; font: 900 18px "Courier New", monospace; color: #fff; -webkit-text-stroke: 1px #a02cff;
  text-shadow: 2px 2px 0 #a02cff; pointer-events: none; }
.combo.go { animation: comboPop .3s ease-out; }
@keyframes comboPop { from { transform: scale(1.6); } to { transform: scale(1); } }
.arc-count { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 900 86px Ubuntu, Arial Black, sans-serif; color: #ffe066; -webkit-text-stroke: 3px #5a2600; text-shadow: 4px 6px 0 rgba(0,0,0,.35); }
.arc-count:empty { display: none; }
.arc-count.go { animation: countPop .6s ease-out; }
@keyframes countPop { from { transform: scale(2.2); opacity: 0; } 35% { transform: scale(1); opacity: 1; } }
.field.quake { animation: quake .35s; }
@keyframes quake { 20% { transform: translate(-7px, 3px) rotate(-1deg); } 40% { transform: translate(6px, -3px) rotate(1deg); }
  60% { transform: translate(-5px, 2px); } 80% { transform: translate(4px, -1px); } }
.arcrules { text-align: center; font-size: 13px; margin: 10px 0 4px; color: #d8c8f0; }
.arcmenu { position: absolute; inset: 0; background: rgba(22,15,40,.94); display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 10px; padding: 20px; border-radius: 16px; text-align: center; z-index: 2; }
.arcmenu[hidden] { display: none; }
.arcmenu h3 { font-size: 30px; margin: 0; color: #ff7eb6; text-shadow: 3px 3px 0 #000; letter-spacing: 2px; }
.arcmenu .btn { background: #e0559a; font-family: inherit; font-size: 18px; letter-spacing: 2px; }
.final { font-size: 22px; } .final b { color: #ffe066; font-size: 34px; }
.initials { display: flex; flex-direction: column; align-items: center; gap: 8px; letter-spacing: 2px; }
.initials input { width: 150px; text-align: center; font: 700 40px "Courier New", monospace; letter-spacing: 12px; background: #000; color: #ffe066;
                  border: 3px solid #ffe066; border-radius: 10px; padding: 4px 0 4px 12px; text-transform: uppercase; }
.initials input.bad { animation: shake .12s 4; border-color: #ff5a5a; }
.board { width: 100%; max-width: 280px; } .board h4 { margin: 8px 0 4px; color: #ffe066; letter-spacing: 2px; }
.board ol { margin: 0; padding-left: 28px; text-align: left; } .board li { padding: 1px 0; }
.board li span { display: inline-block; width: 70px; letter-spacing: 3px; } .board li b { color: #7dff8a; }
@media (max-width: 500px) { .hole { height: 104px; } .hole .mole { height: 90px; } .mole img { max-height: 70px; } .arcmenu h3 { font-size: 24px; }
  .field { padding: 30px 4px 8px; } .hole .back { bottom: 12px; height: 24px; } .hole .front { height: 26px; } .hole .pit { bottom: 24px; }
  .dmg { font-size: 28px; } .dmg.crit { font-size: 32px; } .arc-count { font-size: 70px; } }

.poster .tw { margin-top: 6px; font-size: 15px; color: #8c2a24; } .poster .tw b { font-size: 20px; }
@media (max-width: 700px) { .tr img { max-height: 70px; } .tr { width: 90px; } }
.dungeon .posters { gap: 22px; }
.dungeon .poster { width: 228px; padding: 12px 10px 14px; }
.dungeon .poster h3 { font-size: 42px; }
.dungeon .poster .face { height: 160px; }
.dungeon .poster .who { font-size: 24px; }
.ouch.bot { background: #c83c32; color: #fff; border-color: #6e1e14; font-weight: 700; font-size: 15px; z-index: 6; }

/* ---------- Professor CrtlAltDel quiz */
.quiz { position: fixed; inset: 0; z-index: 75; background: rgba(30,24,40,.6); display: flex; align-items: center; justify-content: center; padding: 14px; }
.quiz[hidden] { display: none; }
.qbox { position: relative; width: min(360px, 100%); background: #2f4a3a; color: #f3ecde; border: 8px solid #8a5f36; border-radius: 16px;
        padding: 18px 18px 16px; text-align: center; box-shadow: 8px 12px 0 rgba(0,0,0,.35); animation: pop .2s; font-family: "Courier New", monospace; }
.qbox .x { position: absolute; top: 4px; right: 10px; border: 0; background: none; color: #f3ecde; font-size: 26px; cursor: pointer; }
.prof { position: relative; height: 170px; display: flex; align-items: flex-end; justify-content: center; margin-top: -6px; }
.prof img { max-height: 170px; max-width: 100%; image-rendering: pixelated;   /* true game size, so it really looks like him */
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.prof .cap { position: absolute; top: -6px; left: 50%; margin-left: -4px; font-size: 30px; transform: rotate(-12deg); }
.qtitle { font-weight: 700; font-size: 20px; margin-top: 4px; color: #ffe066; }
.qsub { font-size: 14px; color: #cfe0cf; margin-bottom: 10px; }
.qq { font-size: 34px; font-weight: 700; margin: 6px 0 10px; letter-spacing: 1px; }
#quizIn { width: 140px; font: 700 26px "Courier New", monospace; text-align: center; padding: 6px; border-radius: 10px; border: 3px solid #ffe066;
          background: #1f3328; color: #fff; }
#quizForm .btn { display: block; margin: 10px auto 0; background: #ffe066; color: #2d2832; font-family: inherit; }
.qmsg { min-height: 20px; margin-top: 8px; font-weight: 700; } .qmsg.ok { color: #9dff9d; } .qmsg.no { color: #ff8a80; }
.qbox.shakeq { animation: shake .12s 4; }
#gbForm button[disabled] { background: #9a93a3; cursor: not-allowed; }
.bonkpass { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; background: #e0559a; color: #fff;
  font-weight: 700; padding: 8px 16px; border-radius: 20px; box-shadow: 0 4px 0 rgba(0,0,0,.2); animation: pop .2s; }
.bonkpass[hidden], .bonkpass:empty { display: none; }
.bonkpass { white-space: nowrap; }

/* guestbook: tweet-sized counter */
.gbcount { text-align: right; font-size: 13px; color: var(--muted); margin: -4px 4px 0; }
.gbcount.near { color: var(--red); font-weight: 700; }
.mob img { max-width: 82%; max-height: 82%; }
#gbSort { margin: 18px 0 14px; }