/* The pages that load inside the fake browser. */
html { background: #0e0628; }
body { background: #0e0628 url(../img/bg-paws.png); }
#page { padding: 12px; overflow: hidden; animation: tube-on .3s steps(5); }
@keyframes tube-on { from { opacity: 0; transform: scaleY(.04); } 60% { opacity: 1; transform: scaleY(.1); } }

/* A page opened on its own URL, from a search result or a shared link, rather than in the shell. */
.solo { max-width: 640px; margin: 0 auto; padding: 12px 12px 0; text-align: center; }
.solo-logo { display: block; background: none; }
.solo-logo:hover { background: none; }
.solo-logo img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.solo p { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 0; font: 13px/1.4 "Silkscreen", monospace; }
html:not(.framed) #page { max-width: 640px; margin: 0 auto; }
html.framed .solo { display: none; }

h1 { margin: 2px 0 10px; font-size: 20px; text-align: center; color: var(--gold); text-shadow: 3px 3px #7a2a08; }
h2.sec { margin: 16px 0 6px; font-size: 12px; color: var(--orange); text-shadow: 2px 2px #2a0a3a; }
p { margin: 0 0 10px; }
.center { text-align: center; }
.scene { display: block; width: 100%; max-width: 544px; margin: 0 auto 10px; border: 4px ridge var(--gold); }
.note { font: 18px/1.1 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #ffd6f0; }
.mono { font-family: "Courier New", monospace; font-size: 15px; }
.new { vertical-align: middle; }

/* speech bubble intro */
.intro { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: end; }
.intro .who { position: relative; text-align: center; }
.intro .who img { width: 192px; max-width: none; margin-left: -20px; display: block; }
.say {
  position: relative; margin: 0 0 40px; padding: 10px 12px; min-height: 96px;
  color: #000; background: #ffffcc; border: 3px solid #000; border-radius: 14px; font-size: 21px; line-height: 1.05;
}
.say::before { content: ""; position: absolute; left: -18px; bottom: 18px; border: 9px solid transparent; border-right-color: #000; }

.boopbtn { display: block; padding: 0; background: none; border: 0; }
.boopbtn:hover { transform: translateY(-2px); }

/* tables, the proper way */
table.stats { width: 100%; border: 3px ridge var(--gold); border-collapse: separate; border-spacing: 2px; background: #1c0e4e; }
table.stats th { width: 36%; padding: 3px 6px; text-align: left; color: #1a0a3a; background: var(--gold); font: 13px "Silkscreen", monospace; vertical-align: top; }
table.stats td { padding: 3px 6px; background: #120838; }

.bar { height: 16px; border: 2px inset var(--gray); background: #000; margin: 2px 0 6px; }
.bar i { display: block; height: 100%; width: var(--v); background: repeating-linear-gradient(90deg, var(--c, var(--orange)) 0 6px, #000 6px 8px); animation: fill 1.2s steps(16) both; }
@keyframes fill { from { width: 0; } }
.bar-label { display: flex; justify-content: space-between; font: 13px "Silkscreen", monospace; color: var(--gold); }

ul.paw { list-style: none; padding: 0; margin: 0 0 10px; }
ul.paw li { padding: 1px 0 1px 20px; background: url(../img/bullet.gif) no-repeat 0 3px; }
html.calm ul.paw li { background-image: url(../img/paw16.png); background-size: 14px; }

.log { border-left: 4px double var(--orange); padding-left: 10px; margin: 0 0 10px; }
.log b { color: var(--gold); font-weight: normal; }

.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* character sheet */
.sheet { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; align-items: start; }
.sheet .pose { background: repeating-linear-gradient(0deg, #2a1058 0 2px, #1c0e4e 2px 4px); border: 4px ridge var(--gold); text-align: center; padding: 6px 0 0; }
.sheet .pose img { width: 288px; max-width: none; margin-left: -24px; display: block; }
.poses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.poses figure { margin: 0; text-align: center; font: 12px "Silkscreen", monospace; color: #c8b8e8; }
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }
.sw button {
  display: flex; align-items: center; gap: 5px; padding: 2px 4px; font: 13px "Silkscreen", monospace; text-align: left;
  color: var(--cream); background: #1c0e4e; border: 2px outset #5a4a8a;
}
.sw button:hover { border-color: var(--gold); }
.sw button i { width: 18px; height: 18px; flex: none; border: 1px solid #000; background: var(--s); }
#toast {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px; color: #000; background: var(--gold);
  border: 2px outset #fff; font: 13px "Silkscreen", monospace; z-index: 9;
}

/* photo album */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.album button {
  display: block; width: 100%; padding: 6px 6px 2px; color: #000; background: #fff8ea; border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); font: 17px/1 "VT323", monospace;
}
.album button:nth-child(odd) { transform: rotate(-2deg); }
.album button:nth-child(even) { transform: rotate(1.5deg); }
.album button:hover { transform: rotate(0) scale(1.05); z-index: 2; position: relative; }
.album img { display: block; width: 100%; height: 170px; object-fit: cover; }
.album span { display: block; padding: 5px 0 4px; }
#lightbox { position: fixed; inset: 0; z-index: 8; display: grid; place-items: start center; padding: 10px; overflow: auto; background: rgba(0, 0, 0, .8); }
#lightbox[hidden] { display: none; }
#lightbox .win { width: min(540px, 100%); color: #000; background: var(--gray); border: 2px outset #fff; }
#lightbox header { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px; color: #fff; font: 13px "Silkscreen", monospace; background: linear-gradient(90deg, #4a1a8a, var(--orange)); }
#lightbox header button { padding: 0 4px; font: 12px "Silkscreen", monospace; color: #000; background: var(--gray); border: 2px outset #fff; }
#lightbox img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
#lightbox p { margin: 0; padding: 4px 8px; font-size: 20px; }

/* DOS box */
.dos { padding: 10px; color: #c8c8c8; background: #000; border: 3px inset var(--gray); font: 19px/1.05 "VT323", monospace; min-height: 196px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dos b { color: #ffd23f; font-weight: normal; }
.disks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.disk {
  position: relative; padding: 8px 10px 8px 42px; min-height: 100px; color: #000; background: var(--cream); border: 2px outset #fff;
}
.disk::before {
  content: ""; position: absolute; left: 6px; top: 8px; width: 28px; height: 28px; background: #2a1058;
  box-shadow: inset 0 -10px #c0c0c0, inset 6px 0 #2a1058, inset -6px 0 #2a1058;
}
.disk:hover { background: #ffe680; animation: wiggle .4s steps(4) infinite; }
.disk h3 { margin: 0 0 4px; font-size: 9px; color: #7a2a08; }
.disk p { margin: 0; line-height: 1; font-size: 18px; }
.disk a { color: #00007a; }

.join { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }

/* button wall */
.wall { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 8px; }
.wall img { display: block; width: 88px; height: 31px; }
.wall.b img { width: 150px; height: 20px; }
textarea { width: 100%; height: 72px; padding: 5px; color: #7fff9a; background: #000; border: 3px inset var(--gray); font: 13px/1.2 "Courier New", monospace; resize: vertical; cursor: text; }

/* arcade cabinet */
.cab { max-width: 572px; margin: 0 auto; padding: 12px; background: linear-gradient(#3a1a7a, #1a0a3a); border: 4px outset var(--violet); border-radius: 12px 12px 0 0; }
.cab h2 { margin: 0 0 8px; font-size: 14px; text-align: center; }
#game { display: block; width: 100%; aspect-ratio: 272 / 184; image-rendering: pixelated; border: 6px inset #000; background: #000; touch-action: none; }
.cab .hint { margin: 6px 0 0; text-align: center; font: 13px "Silkscreen", monospace; color: var(--gold); }

@media (max-width: 480px) {
  .intro, .sheet { grid-template-columns: minmax(0, 1fr); }
  .intro .who img, .sheet .pose img { margin: 0 auto; }
  .say { margin-bottom: 8px; }
  .say::before { display: none; }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 15px; }
}